<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"	
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<h:form prependId="false" style="padding:0px">
	
		<h:panelGrid columns="2" style="width:100%" columnClasses="top-align,top-align">
			<p:tabView orientation="left" dynamic="true" effect="slide"   value="#{scheduleBean.selMicroCycle.daySchedules}" var="daySchedule"  >
				<p:tab>
					<f:facet name="title">
						<h:outputText value="#{daySchedule.dayDate}">
							<f:convertDateTime locale="pt" dateStyle="long" pattern=" EEEE dd/MM/yyyy" />
						</h:outputText>
					</f:facet>
					
					<h:panelGrid columns="2">
						<f:facet name="header">
							<h:outputText value="MicroCiclo #{scheduleBean.selMicroCycle.name} - #{scheduleBean.selSchedule.modality.name}" />
						</f:facet>
	
						<p:panelGrid style="width:550px" >
							<f:facet name="header">
								<p:row>
									<p:column colspan="6">
										<h:outputText value="Volumes Planejados"/>
									</p:column>
								</p:row>					
								<p:row>
									<p:column colspan="1" style="width:20px;padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
										<p:commandButton title="Adicionar" icon="ui-icon-plus" style="height:40px;padding:0px;margin:-5px;border:none;text-align:center;" styleClass="ui-icon-only"/>
									</p:column>
									<p:column	colspan="2" style="padding:0px;margin:0px;">
										<h:outputText value="Volume"/>
									</p:column>
									<p:column	colspan="1" style="padding:0px;margin:0px;">
										<h:outputText  value="Tipo de volume"/>
									</p:column>
									<p:column	colspan="1" style="padding:0px;margin:0px;">
										<h:outputText  value="Cap. Física"/>
									</p:column>
									<p:column	colspan="1" style="padding:0px;margin:0px;">
										<h:outputText value="Zona de intensidade"/>
									</p:column>
								</p:row>				
							</f:facet>					
							<p:row>
								<p:column colspan="1" style="width:20px;padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
									<p:commandButton title="Excluir" icon="ui-icon-trash"  style="height:40px;padding:0px;margin:-5px;border:none;text-align:center;" />
								</p:column>
								<p:column colspan="2">
									<p:spinner value="#{scheduleBean.planned.volume.value}"  size="3" maxlength="3" />
								</p:column>	
								<p:column colspan="1" style="width:180px" >
									<p:selectOneMenu  value="#{scheduleBean.planned.volumeType}" style="width:150px"  >
										<f:selectItem itemLabel="Selecione" 	itemValue="Selecione" />
										<f:selectItem itemLabel="Tempo" 		itemValue="Tempo"/>
										<f:selectItem itemLabel="Distância" 	itemValue="Distância"/>
										<f:selectItem itemLabel="Saltos" 		itemValue="Saltos"/>
										<f:selectItem itemLabel="Repetições" 	itemValue="Repetições"/>
									</p:selectOneMenu>  
								</p:column>
								<p:column colspan="1" style="width:180px" >
									<p:selectOneMenu  value="#{scheduleBean.planned.physicCap}" style="width:150px"  >
										<f:selectItem itemLabel="Selecione" 	itemValue="0" />
										<f:selectItem itemLabel="Resistência" 	itemValue="1"/>
										<f:selectItem itemLabel="Força" 		itemValue="2"/>
										<f:selectItem itemLabel="Velocidade" 	itemValue="3"/>
									</p:selectOneMenu>  
								</p:column>
								<p:column colspan="1">
									<p:selectOneMenu value="#{scheduleBean.planned.intensityZone.name}"  style="width:150px"   >
										<f:selectItem itemLabel="Selecione" 	itemValue="Selecione"/>
										<f:selectItem itemLabel="RML(1)" 		itemValue="RML(1)"/>
										<f:selectItem itemLabel="RML(1-2)" 		itemValue="RML(1-2)"/>
										<f:selectItem itemLabel="RML(2)" 		itemValue="RML(2)"/>
										<f:selectItem itemLabel="RF(2)" 		itemValue="RF(2)"/>
									</p:selectOneMenu>
								</p:column> 
							</p:row>
						</p:panelGrid>
					</h:panelGrid>
				</p:tab>
			</p:tabView >
			<p:outputPanel id="microCycleGraphic">
				<h:panelGrid columns="4" cellspacing="5">
				
					<h:outputText value="Volume: "/>
					<p:selectOneMenu  value="#{scheduleBean.planned.volumeType}" style="width:150px"  >
						<f:selectItem itemLabel="Selecione" 	itemValue="Selecione" />
						<f:selectItem itemLabel="Tempo" 		itemValue="Tempo"/>
						<f:selectItem itemLabel="Distância" 	itemValue="Distância"/>
						<f:selectItem itemLabel="Saltos" 		itemValue="Saltos"/>
						<f:selectItem itemLabel="Repetições" 	itemValue="Repetições"/>
						<p:ajax event="change" update="microCycleGraphic" />
					</p:selectOneMenu>  

					<p:commandButton value="Analisar" action="#{reportBean.fillDates}" oncomplete="wreportDialog.show()" update=":reportDialog" ajax="true" >
						<f:setPropertyActionListener target="#{reportBean.selMycroCycle}" value="#{scheduleBean.selMicroCycle}"/>
					</p:commandButton>
					<p:spacer width="1" height="1"/>
				
					<h:outputText value="Volume máximo: " />
					<h:outputText value="40 " />
	
					<h:outputText value="Percentual: " />
					<h:outputText value="80%" />
	
				</h:panelGrid>
				
				<p:barChart value="#{scheduleBean.microCycleGraphic}" legendPosition="e" animate="true"  
						 minY="0" maxY="50"  style="height:200px;width:400px;margin-left:50px" minX="0" maxX="7" />	
			</p:outputPanel>
		</h:panelGrid>
	</h:form>				


</html>